<template>
    <div class="login-box">
        <div class="brand">优蓝优选 <span>美好生活的开始</span></div>
        <div class="line l">
            <input type="text" placeholder="请输入手机号码">
        </div>
        <div class="line l">
            <input type="text" placeholder="请输入验证吗">
            <span>重新获取(59s)</span>
        </div>
        <div class="line">
            <van-checkbox v-model="remember" checked-color="#006d75">是否记住手机号？</van-checkbox>
        </div>
        <div class="line">
            <van-checkbox v-model="remember" checked-color="#006d75">是同意免登陆？</van-checkbox>
        </div>
        <div class="line">
            <van-button type="primary" square
                color="linear-gradient(to right, #36cfc9, #00474f)" block>块级元素</van-button>
        </div>
        <div class="line">
            <van-checkbox v-model="remember" checked-color="#006d75">是否同意<span @click="router.push('/conts')">《优蓝优选用户使用协议》</span>？</van-checkbox>
        </div>
        <div class="reg" @click="router.push('/register')">去注册？</div>
        <div class="right">
            千锋科技 &copy; 2023 ~ 
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Ref, ref } from "vue";
import { Router, useRouter } from "vue-router";

const router: Router = useRouter()
const remember: Ref<Boolean> = ref(false);
</script>

<style lang="less" scoped>
@import "../../style/common.less";
.login-box {
    .rel();
    padding: 18vh @pagePadding 0;
    .brand {
        display: block;
        text-align: center;
        font-size: .9rem;
        color: @c7;
        line-height: 30px;
        margin-bottom: 36px;
        &::before {
            content: '';
            display: inline-block;
            vertical-align: bottom;
            width: 30px;
            height: 30px;
            background: url(../../images/logo.png) center center / 100% 100% no-repeat;
            margin-right: 10px;
        }
        span {
            font-size: .6rem;
            margin-left: 3px;
        }
    }
    .line {
        display: flex;
        margin-bottom: 18px;
        line-height: 24px;
        &.l {
            padding: 10px 0;
            border-bottom: solid 1px @g05;
        }
        input {
            flex: 1;
            /** flex撑破 */
            width: 0;
            border: none;
            outline: none;
            font-size: 1rem;
            color: @c7;
            background: transparent;
            text-indent: 16px;
            &::-webkit-input-placeholder {
                font-size: .7rem;
                color: @g05;
            }
        }
        span {
            flex: 0 0 86px;
            font-size: .6rem;
            color: @c7;
            border-left: solid 1px @g05;
            text-align: center;
        }
        .van-checkbox {
            font-size: .65rem;
        }
    }
}
.reg {
    display: block;
    text-align: right;
    line-height: 32px;
    font-size: .65rem;
    color: @c7;
}
</style>